import React from "react"
import {  Navigate, useRoutes } from "react-router-dom"
import ProtectedRoute from '@/componment/ProtectedRoute/ProtectedRoute'
// 封装好的路由组件懒加载方法
import LazyLoad from './utils/lazyLoad'
// 组件分两钟: 普通组件  路由组件
// import Login from '@/pages/Login'
// import Home from '@/pages/Home'

// 由于这个应用是将所有的路由进行拆分,根据模块拆分出了很多的子路由文件,我们需要将子路由注册到rootRouter跟路由对象中,这样子路由才能在应用中生效  我们需要一次性加载所有的子路由文件 import.meta.glob()
const metaRouters = import.meta.glob('./modules/*.tsx',{eager:true}) // eager:true 立即加载
export const routerArray = [] // 存储子路由数据

// 解析子路由的格式  {path:'/login',element:<Login/>}
Object.keys(metaRouters).forEach(item=>{
  Object.keys(metaRouters[item]).forEach(key=>{
    routerArray.push(...metaRouters[item][key])  // [{path:"/login",element:<Login/>}]
  })
})

// 定义基础路由规则
export const rootRouter = [
  {
    path:"/",
    element:<Navigate to="/login"/>  // 重定向
  },
  {
    path:"/login",
    element:LazyLoad(React.lazy(()=>import('@/pages/Login')))
  },
  {
    path:"/home",
    // element: LazyLoad(React.lazy(() => import('@/pages/Home')))
    element:(
      <ProtectedRoute 
        element={LazyLoad(React.lazy(() => import('@/pages/Home')))}
      />
    )
  },
  {
    path:"*", // 404页面
    element:LazyLoad(React.lazy(() => import('@/pages/NotFound/404')))
  },
  ...routerArray
]

// 创建一个路由对象
const router = ()=>{
  return useRoutes(rootRouter)
}

export default router